<template>
  <div class="tiptap-editor">
    <!-- 工具栏 -->
    <div
      class="border-b border-gray-300 dark:border-gray-600 p-2 flex flex-wrap gap-2"
    >
      <button
        v-for="item in toolbarItems"
        :key="item.icon"
        @click="item.action"
        class="p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700"
        :class="{ 'bg-gray-100 dark:bg-gray-700': item.isActive?.() }"
        :title="item.title"
      >
        <component :is="item.icon" class="w-5 h-5" />
      </button>

      <!-- 标题下拉框 -->
      <el-dropdown trigger="click" @command="setHeading">
        <el-button
          class="p-2"
          :class="{ 'bg-gray-100 dark:bg-gray-700': isAnyHeadingActive }"
        >
          <DocumentTextIcon class="w-5 h-5" />
          <span class="text-sm ml-1">标题</span>
        </el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item
              v-for="level in 4"
              :key="level"
              :command="level"
              :class="{ 'is-active': isHeadingActive(level) }"
            >
              标题{{ level }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>

    <!-- 编辑器内容 -->
    <div class="p-4 min-h-[300px] prose dark:prose-invert max-w-none">
      <EditorContent :editor="editor" />
    </div>
  </div>
</template>

<script setup>
import { useEditor, EditorContent } from "@tiptap/vue-3";
import StarterKit from "@tiptap/starter-kit";
import { watch, onBeforeUnmount, computed, ref } from "vue";
import {
  BoldIcon,
  ItalicIcon,
  StrikethroughIcon,
  DocumentTextIcon,
  ListBulletIcon,
  CodeBracketIcon,
  ChatBubbleLeftIcon,
  ArrowUturnLeftIcon,
  ArrowUturnRightIcon,
} from "@heroicons/vue/24/outline";

const props = defineProps({
  modelValue: {
    type: String,
    default: "",
  },
});

const emit = defineEmits(["update:modelValue"]);

// 创建编辑器实例
const editor = useEditor({
  content: props.modelValue,
  extensions: [
    StarterKit.configure({
      heading: {
        levels: [1, 2, 3, 4],
      },
    }),
  ],
  editorProps: {
    attributes: {
      class: "prose dark:prose-invert max-w-none focus:outline-none",
    },
  },
  onUpdate: ({ editor }) => {
    emit("update:modelValue", editor.getHTML());
  },
});

// 监听内容变化
watch(
  () => props.modelValue,
  (newContent) => {
    const isSame = newContent === editor.value?.getHTML();
    if (!isSame) {
      editor.value?.commands.setContent(newContent, false);
    }
  }
);

// 组件销毁时销毁编辑器实例
onBeforeUnmount(() => {
  editor.value?.destroy();
});

// 检查是否有任何标题处于活动状态
const isAnyHeadingActive = computed(() => {
  return editor.value?.isActive("heading");
});

// 检查特定级别的标题是否处于活动状态
const isHeadingActive = (level) => {
  return editor.value?.isActive("heading", { level });
};

// 设置标题级别
const setHeading = (level) => {
  editor.value?.chain().focus().toggleHeading({ level }).run();
};

// 工具栏配置
const toolbarItems = [
  {
    icon: BoldIcon,
    title: "加粗",
    action: () => editor.value?.chain().focus().toggleBold().run(),
    isActive: () => editor.value?.isActive("bold"),
  },
  {
    icon: ItalicIcon,
    title: "斜体",
    action: () => editor.value?.chain().focus().toggleItalic().run(),
    isActive: () => editor.value?.isActive("italic"),
  },
  {
    icon: StrikethroughIcon,
    title: "删除线",
    action: () => editor.value?.chain().focus().toggleStrike().run(),
    isActive: () => editor.value?.isActive("strike"),
  },
  {
    icon: ListBulletIcon,
    title: "无序列表",
    action: () => editor.value?.chain().focus().toggleBulletList().run(),
    isActive: () => editor.value?.isActive("bulletList"),
  },
  // {
  //   icon: ListOrderedIcon,
  //   title: "有序列表",
  //   action: () => editor.value?.chain().focus().toggleOrderedList().run(),
  //   isActive: () => editor.value?.isActive("orderedList"),
  // },
  {
    icon: CodeBracketIcon,
    title: "代码块",
    action: () => editor.value?.chain().focus().toggleCodeBlock().run(),
    isActive: () => editor.value?.isActive("codeBlock"),
  },
  {
    icon: ChatBubbleLeftIcon,
    title: "引用",
    action: () => editor.value?.chain().focus().toggleBlockquote().run(),
    isActive: () => editor.value?.isActive("blockquote"),
  },
  {
    icon: ArrowUturnLeftIcon,
    title: "撤销",
    action: () => editor.value?.chain().focus().undo().run(),
  },
  {
    icon: ArrowUturnRightIcon,
    title: "重做",
    action: () => editor.value?.chain().focus().redo().run(),
  },
];
</script>

<style>
.tiptap-editor {
  @apply bg-white dark:bg-gray-700;
}

.tiptap-editor .ProseMirror {
  @apply outline-none;
}

.tiptap-editor .ProseMirror p {
  @apply my-2;
}

.tiptap-editor .ProseMirror h1 {
  @apply text-2xl font-bold my-4;
}

.tiptap-editor .ProseMirror h2 {
  @apply text-xl font-bold my-3;
}

.tiptap-editor .ProseMirror h3 {
  @apply text-lg font-bold my-3;
}

.tiptap-editor .ProseMirror h4 {
  @apply text-base font-bold my-2;
}

.tiptap-editor .ProseMirror ul {
  @apply list-disc pl-6 my-2;
}

.tiptap-editor .ProseMirror ol {
  @apply list-decimal pl-6 my-2;
}

.tiptap-editor .ProseMirror blockquote {
  @apply border-l-4 border-gray-300 dark:border-gray-600 pl-4 my-2 italic;
}

.tiptap-editor .ProseMirror pre {
  @apply bg-gray-100 dark:bg-gray-800 p-4 rounded my-2;
}

.tiptap-editor .ProseMirror code {
  @apply bg-gray-100 dark:bg-gray-800 px-1 py-0.5 rounded;
}

/* 添加 Element Plus 下拉菜单样式 */
.el-dropdown-menu__item.is-active {
  @apply bg-gray-100 dark:bg-gray-700 text-blue-600 dark:text-blue-400;
}

.el-dropdown-menu__item:hover {
  @apply bg-gray-50 dark:bg-gray-600;
}
</style>
